<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>首页</title>
</head>
<head th:replace="components/head::head">
</head>
<style>
    .mz-block {
        text-align: center;
        width: 100%;
        margin-bottom: 30px;
    }

    h4 {
        color: #aaaaaa;
    }
</style>
<body>
<div class="layui-fluid" style="margin-top: 50px">
    <div class="mz-block">
        <h1>
            <span>作业查重</span>
        </h1>
        <h4>
            <span>上传文件支持ZIP、RAR压缩格式</span>
        </h4>
        <h4>
            <span>查重格式支持DOC、DOCX、TXT、PDF</span>
        </h4>
    </div>
    <div class="mz-block">
        <a style="text-decoration:underline;font-weight: bold" th:href="@{/query}">已有提交查重？点此立即查询查重结果</a>
    </div>
    <div class="mz-block">
        <div class="layui-upload-drag" id="file-upload" style="border: 2px dashed #009688">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
        </div>
    </div>

    <div style="width: 200px;text-align: unset;margin: 0 auto 30px auto">
        <h4>
            <span>压缩文件结构示例</span>
        </h4>
        <div id="test-tree-demo6"></div>
    </div>
</div>
<form id="recheckResult" th:action="@{/upload_ok}" method="post" style="display: none">
    <input id="recheckNo" name="recheckNo" type="text"/>
</form>
<script type="text/javascript" th:inline="none">
    ;!function () {
        let form = layui.form,
            upload = layui.upload,
            tree = layui.tree,
            layer = layui.layer;
        form.render();

        //拖拽上传
        upload.render({
            elem: '#file-upload'
            , url: '/recheck/upload'
            , accept: 'file'
            , exts: 'zip|rar'
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.open({
                    type: 3
                });
            }
            , done: function (res, index, upload) {
                //假设code=0代表上传成功
                if (res.code == 0) {
                    document.getElementById("recheckNo").value = res.data;
                    document.getElementById("recheckResult").submit();
                } else {
                    layer.alert(res.message);
                    layer.closeAll('loading');
                }
            }
            , error: function (index, upload) {
                layer.alert("上传过程出现问题，如重试不能解决，请联系管理员");
            }
        });

        let data = [{
            title: '查重测试压缩文件001.zip'
            , id: 1
            , field: 'fileName'
            , checked: true
            , spread: true
            , children: [{
                title: '待查重文件夹'
                , id: 2
                , field: 'demoFile01'
                , spread: true
                , children: [{
                    title: '作业一.doc'
                    , id: 3
                }, {
                    title: '作业二.docx'
                    , id: 4
                }, {
                    title: '作业三.txt'
                    , id: 5
                }, {
                    title: '作业四.pdf'
                    , id: 7
                }, {
                    title: '···'
                    , id: 8
                }]
            }, {
                title: 'exception.txt'
                , id: 9
            }]
        }]

        //点击节点新窗口跳转
        tree.render({
            elem: '#test-tree-demo6'
            , data: data
            , isJump: true
        });
    }();
</script>
</body>
</html>